<template>
  <div class="hello">
    <Navbar></Navbar>
    <div id="title">
      <a 
        @click="a=true" 
        id="click"
        :style="a?'':abc"
      >最新话题</a>
      <a @click="a=false" :style="a?abc:''">话题小组</a>
    </div>
    <Huati v-show="a"></Huati>
    <Xiaozhan v-show="!a"></Xiaozhan>
  </div>
</template>
<script>
import Navbar from "../components/Navbar.vue"
import Huati from "../components/Huati.vue"
import Xiaozhan from "../components/Xiaozhan.vue"
export default {
  components: { Navbar,Xiaozhan,Huati },
  mounted: function(){
    this.$store.dispatch("isLogin");
  },
  data:function(){
    return{
      a:true,
      abc:{
        "background-color":"#ccc"
      }
    }
  },
  methods:{
    click:function(){
      this.a = true;
    },
    btnclick:function(){
      this.a = false;
    }
  }
}
</script>

<style scoped>
  #title{
    display: flex;
    justify-content: space-around;
  }
  a{
    display: inline-block;
    width: 50%;
    text-align: center;
  }
</style>
